<script setup lang="ts">
import type { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import type { RuleObject } from 'ant-design-vue/lib/form';

import type { SysTenantResp } from '#/type/sys_tenant';

import { ref, watch } from 'vue';
import type { PropType } from 'vue';

import {
  Col,
  DatePicker,
  Divider,
  Form,
  FormItem,
  Input,
  InputNumber,
  message,
  Modal,
  Row,
  Switch,
} from 'ant-design-vue';

const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object as PropType<SysTenantResp> | undefined,
    default: () => {},
  },
});

const emit = defineEmits(['ok', 'cancel']);
const formRef = ref();
const formRules: { [k: string]: RuleObject | RuleObject[] } = {
  role_name: [
    {
      type: 'string',
      required: true,
      message: '请输入名称',
      trigger: 'blur',
    },
    { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' },
  ],
  role_code: [
    {
      type: 'string',
      required: true,
      message: '请输入编码',
      trigger: 'blur',
    },
    { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' },
  ],
};
// 创建本地数据副本
const localData = ref<SysTenantResp>({ ...props.data });
// 在 props.data 变化时更新本地数据
watch(
  () => props.data,
  (newData) => {
    localData.value = { ...newData } as SysTenantResp;
  },
  { deep: true },
);

const modalSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      emit('ok', localData.value);
    })
    .catch((_: ValidateErrorEntity) => {
      message.error({
        content: '请检查表单填写是否正确',
        duration: 1,
      });
    });
};
</script>

<template>
  <Modal
    :mask-closable="false"
    :open="open"
    :style="{ maxWidth: '50%', width: '50%' }"
    :title="localData ? '编辑' : '新建'"
    @cancel="emit('cancel')"
    @ok="modalSubmit"
  >
    <Divider />
    <Form
      ref="formRef"
      :label-col="{ span: 6 }"
      :model="localData"
      :rules="formRules"
      :wrapper-col="{ span: 18 }"
      layout="horizontal"
    >
      <Row :gutter="16">
        <Col :span="12">
          <FormItem label="租户名称" name="tenant_name">
            <Input
              v-model:value="localData.tenant_name"
              placeholder="请输入名称"
            />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="企业名称" name="org_name">
            <Input
              v-model:value="localData.org_name"
              placeholder="请输入企业名称"
            />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="12">
          <FormItem label="企业信用码" name="org_credit_code">
            <Input
              v-model:value="localData.org_credit_code"
              placeholder="请输入企业信用码"
            />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="企业电话" name="org_phone">
            <Input
              v-model:value="localData.org_phone"
              placeholder="请输入企业电话"
            />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="12">
          <FormItem label="余额" name="account_balance">
            <InputNumber
              v-model:value="localData.account_balance"
              placeholder="请输入余额"
            />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="积分" name="account_score">
            <InputNumber
              v-model:value="localData.account_score"
              placeholder="请输入积分"
            />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="12">
          <FormItem label="账号数量" name="account_count">
            <InputNumber
              v-model:value="localData.account_count"
              placeholder="请输入账号数量"
            />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="到期时间" name="expire_time">
            <DatePicker
              v-model:value="localData.expire_time"
              format="YYYY-MM-DD HH:mm"
              value-format="YYYY-MM-DD HH:mm"
            />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="12">
          <FormItem label="状态" name="status">
            <Switch
              v-model:checked="localData.status"
              :checked-value="1"
              :un-checked-value="0"
              checked-children="启用"
              un-checked-children="禁用"
            />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="排序" name="sort">
            <InputNumber
              v-model:value="localData.sort"
              placeholder="请输入排序"
            />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="24">
          <FormItem
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
            label="企业简介"
            name="org_intro"
          >
            <Input.TextArea
              v-model:value="localData.org_intro"
              :rows="2"
              placeholder="请输入企业简介"
            />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="24">
          <FormItem
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
            label="备注"
            name="remark"
          >
            <Input.TextArea
              v-model:value="localData.remark"
              :rows="2"
              placeholder="请输入备注"
            />
          </FormItem>
        </Col>
      </Row>
    </Form>
    <Divider />
  </Modal>
</template>

<style scoped></style>
